<template>
  <div class="incomeContainer">
    <div class="incomeForm">
      <el-form
        ref="ruleFormRef"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
        inline
      >
        <span class="incomeText">收支管理</span>
        <el-form-item label="订单编号">
          <el-input placeholder="请输入订单编号/退款编号" />
        </el-form-item>
        <el-form-item label="支付流水号">
          <el-input placeholder="请输入支付流水号" />
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select
            v-model="orderValue"
            class="m-2"
            placeholder="请选择订单类型"
          >
            <el-option
              v-for="item in orderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="交易完成日期">
          <el-select
            v-model="transactionValue"
            class="m-2"
            placeholder="请选择时间段"
          >
            <el-option
              v-for="item in transactionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >查询</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="total">
      <el-button>批量导出</el-button>
      <el-button>申请提现</el-button>
      <div class="totalFit">
        <span class="frontText">累计收入：</span>
        <span class="backText">￥2323.32</span>
      </div>
      <div class="totalFit">
        <span class="frontText">累计退款：</span>
        <span class="backText">￥23.32</span>
      </div>
      <div class="totalFit">
        <span class="frontText">累计提现：</span>
        <span class="backText">￥1000.00</span>
      </div>
      <div class="totalFit">
        <span class="frontText">提现中：</span>
        <span class="backText">￥50.00</span>
      </div>
      <div class="totalFit">
        <span class="frontText">可提现：</span>
        <span class="backText">￥500.00</span>
      </div>
    </div>
    <div class="incomeTable">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="number" label="序号" width="60" />
        <el-table-column prop="serial" label="支付流水号" width="180" />
        <el-table-column prop="time" label="交易时间" />
        <el-table-column prop="way" label="方式" />
        <el-table-column prop="price" label="金额" />
        <el-table-column prop="payment" label="支付方式" />
        <el-table-column prop="connectOrder" label="关联订单号" />
        <el-table-column prop="orderType" label="订单类型" />
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="4"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";

const orderValue = ref("");
const transactionValue = ref("");
const orderOptions = reactive([
  {
    label: "微信",
    value: "微信",
  },
  {
    label: "支付宝",
    value: "支付宝",
  },
]);
const transactionOptions = reactive([
  {
    value: "1-6月",
    label: "1-6月",
  },
  {
    value: "7-12月",
    label: "7-12月",
  },
]);
const tableData = [
  {
    number: 1,
    serial: "15648979464879",
    time: "2020-04-08 16:06:49",
    way: "收款",
    price: "+200",
    payment: "微信支付",
    connectOrder: "852369879786565",
    orderType: "普通订单",
  },
  {
    number: 2,
    serial: "15648979464879",
    time: "2020-04-08 16:06:49",
    way: "收款",
    price: "+200",
    payment: "微信支付",
    connectOrder: "852369879786565",
    orderType: "普通订单",
  },
  {
    number: 3,
    serial: "15648979464879",
    time: "2020-04-08 16:06:49",
    way: "收款",
    price: "+200",
    payment: "微信支付",
    connectOrder: "852369879786565",
    orderType: "普通订单",
  },
  {
    number: 4,
    serial: "15648979464879",
    time: "2020-04-08 16:06:49",
    way: "收款",
    price: "+200",
    payment: "微信支付",
    connectOrder: "852369879786565",
    orderType: "普通订单",
  },
];
export default {
  name: "IncomeExpenseManage",
  setup() {
    return {
      orderValue,
      orderOptions,
      transactionValue,
      transactionOptions,
      tableData,
    };
  },
};
</script>
<style lang="less" scoped>
.incomeContainer {
  width: 1656px;
  max-width: 1656px;
  height: 374px;
  background-color: #fff;
  margin: 32px 32px 0 32px;

  .incomeForm {
    height: 50px;
    padding: 0 0 0 12px;
    .el-form {
      display: flex;
      align-items: center;
    }
    .incomeText {
      width: 64px;
      height: 50px;
      font-size: 14px;
      color: #101010;
      letter-spacing: 0;
      line-height: 50px;
    }
    /deep/ .el-form-item {
      margin: 0;
      input::-webkit-input-placeholder {
        font-size: 14px;
        color: #c0c0c0;
        letter-spacing: 0;
      }
      input::-moz-input-placeholder {
        font-size: 14px;
        color: #c0c0c0;
        letter-spacing: 0;
      }
      input::-ms-input-placeholder {
        font-size: 14px;
        color: #c0c0c0;
        letter-spacing: 0;
      }
    }
    /deep/ .el-form-item__label {
      font-size: 12px;
      color: #898989;
      letter-spacing: 0;
      width: 90px !important;
    }
    /deep/ .el-form-item__content {
      flex-wrap: nowrap;
    }
  }

  .total {
    height: 62px;
    display: flex;
    align-items: center;
    padding: 0 0 0 12px;
    border-top: 1px solid #ccc;
    .totalFit {
      margin-left: 60px;
      .frontText {
        font-size: 12px;
        color: #898989;
        letter-spacing: 0;
      }
      .backText {
        font-size: 12px;
        color: #101010;
        letter-spacing: 0;
      }
    }
  }

  .incomeTable {
    font-size: 14px;
    color: #898989;
    letter-spacing: 0;
  }
}
</style>